﻿@{
  Layout = "~/Views/Shared/_LayoutWithTree.cshtml";
  ViewData["Title"] = "用户列表";
}
@section Left {
  <div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
      <li lay-id="code" class="layui-this">组织机构</li>
    </ul>
    <div id="tree"></div>
  </div>
}
@section Main {
  <div class="layui-layout layui-layout-admin">
    <div class="layui-card">
      <div class="layui-card-body">
        <form class="layui-form layui-form-pane">
          <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
              <input type="text" name="realName" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-inline">
              <input type="text" name="phone" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn" lay-submit lay-filter="btnsearch">
                <i class="layui-icon layui-icon-search"></i> 查询
              </button>
            </div>
          </div>
        </form>

        <table id="lsttable" lay-filter="lsttable"></table>
        <script type="text/html" id="toolbar">
          <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-addition"></i> 添加
          </button>
        </script>
        <script type="text/html" id="bar">
          <a class="layui-btn layui-btn-xs layui-btn-primary layui-border" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-xs layui-btn-primary layui-border" lay-event="del">删除</a>
        </script>
      </div>
    </div>
  </div>
}
@section scripts {
  <script type="text/javascript">
    var app = {};
    layui.use(['tools', 'toast', 'http'], function () {
      var table = layui.table,
        tree = layui.tree,
        $ = layui.$,
        form = layui.form,
        http = layui.http,
        toast = layui.toast,
        tools = layui.tools;

      //
      app.bindlist = function () {
        let cols =
          [[
            { checkbox: true, fixed: true },
            { title: '帐号', field: 'account', width: 160 },
            { title: '姓名', field: 'realName', width: 120 },
            { title: '手机号码', field: 'phone', width: 160 },
            { title: '角色名称', field: 'roleName', width: 220 },
            { title: '所属机构', field: 'orgName', minWidth: 220 },
            { fixed: 'right', title: '操作', toolbar: '#bar', align: 'right', width: 120 }
          ]];
        //
        tools.PageTable({ url: '/api/sysUser/page', cols });
        table.on('toolbar(lsttable)', function (obj) {
          var id = obj.config.id;
          var checkStatus = table.checkStatus(id);
          switch (obj.event) {
            case 'add':
              app.add();
              break;
          };
        });
        table.on('tool(lsttable)', function (obj) {
          var data = obj.data;
          switch (obj.event) {
            case 'edit':
              app.add(data);
              break;
            case 'del':
              app.del(data.id);
              break;
          };
        });
      }
      app.add = function (data) {
        data = data || {};
        tools.open({
          area: ['700px', '100%'],
          content: './add',
          title: '用户管理',
          success: function (layero, index, that) {
            tools.initValue(layero, data);
          },
          yes: function (index, layero) {
            var iframeWin = window[layero.find('iframe')[0]['name']];
            iframeWin.app.save();
          }
        });
      }
      app.del = function (id) {
        var index = layer.confirm('您确定要删除当前用户吗？', function () {
          http.post('/api/sysUser/delete', { id }).then((res) => {
            if (res.code == 200) {
              layer.close(index);
              table.reload('lsttable');
              toast.success({ message: '删除成功！' });
            }
            else {
              layer.alert('删除失败，错误信息' + res.message, { icon: 2 });
            }
          })
        });
      }

      app.loadTree = function () {
        http.get('/api/sysOrg/list?Id=0').then(res => {
          var data = res.result;
          data[0].spread = true;
          tree.render({
            onlyIconControl: true,
            elem: '#tree',
            customName: {
              title: 'name'
            },
            data: data,
            click: function (obj) {
              //
              $('.layui-tree-selected').removeClass('layui-tree-selected');
              $(obj.elem).addClass('layui-tree-selected');
              //
              table.reload('lsttable', {
                where: { OrgId: obj.data.id }
              })
            }
          });
        })
      }
      //
      app.init = function () {
        //查询
        form.on('submit(btnsearch)', function (data) {
          console.log(data.field)
          table.reload('lsttable', {
            where: data.field
          })
          return false;
        });

        app.bindlist();  //加载列表
        app.loadTree();//加载组织机构
      }();
    })
  </script>
}
